<template>
    <div class="leftOne">
        <div class="sjzlLeftOne">
            <div class="sjzlLeftOne__left">
                <SjzlTitle
                    titles="原始库资源统计"
                    ImgSrc="./data/images/sjzl/left1.png"
                />
                <div class="fours">
                    <div
                        class="fours__item"
                        v-for="(item, index) in foursList"
                        :key="index"
                        @click="handleClick1(item, index)"
                    >
                        <div class="topWord">
                            {{ item.name }}
                        </div>
                        <div class="bottomWord">
                            <span>{{ item.value }}</span>
                            <span>{{ item.grow }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sjzlLeftOne__right">
                <SjzlTitle
                    titles="系统流程"
                    ImgSrc="./data/images/sjzl/left2.png"
                />
                <div class="bumenList">
                    <div>资源提供</div>
                    <div>数据共享中心</div>
                    <div>资源消费</div>
                </div>
                <div id="bumenChart"></div>
            </div>
        </div>
        <div class="sjzlLeftTwo">
            <div class="sjzlLeftTwo__left">
                <SjzlTitle
                    titles="省大数据平台接入资源统计"
                    ImgSrc="./data/images/sjzl/left3.png"
                />
                <div class="sjzlLeftTwo__left__top">
                    <div class="eights">
                        <div
                            class="eights__item"
                            v-for="(item, index) in eightsList"
                            :key="index"
                            :style="{ borderColor: `${item.color}` }"
                            @click="handleClick2(item, index)"
                        >
                            <div class="eights__item__left">
                                <div>{{ item.name }}</div>
                                <div>环比：{{ item.huanbi }}</div>
                            </div>
                            <div
                                class="eights__item__right"
                                :style="{ color: `${item.color}` }"
                            >
                                {{ item.value }}个
                            </div>
                        </div>
                    </div>
                    <!-- <div class="fours">
                        <div class="fours__item" 
                            v-for="(item,index) in eightsList" :key="index"
                            :style="{borderColor:`${item.color}`}"
                        >
                            <div class="fours__item__left">
                                <div>{{item.name}}</div>
                                <div>环比：{{item.huanbi}}</div>
                            </div>
                            <div 
                                class="fours__item__right"  
                                :style="{color:`${item.color}`}">
                                {{item.value}}
                            </div>
                        </div>
                    </div> -->
                    <div id="chart1"></div>
                </div>
                <div class="sjzlLeftTwo__left__bottom">
                    <div class="title">省大数据平台接入资源实时情况</div>
                    <div id="chart3">
                        <div class="chart3Header">
                            <div>新增数据名称</div>
                            <div>数据流量</div>
                            <div>部门</div>
                        </div>
                        <div class="myscroll">
                            <ul class="flightBody">
                                <li
                                    class="flightBodyList"
                                    v-for="(item, index) in tbody"
                                    :key="index"
                                >
                                    <div>{{ item["name"] }}</div>
                                    <div>{{ item["size"] }}</div>
                                    <div>{{ item["time"] }}</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sjzlLeftTwo__right">
                <SjzlTitle
                    titles="各部门接入资源统计"
                    ImgSrc="./data/images/sjzl/left4.png"
                />
                <div class="sjzlLeftTwo__right__top">
                    <div class="fours">
                        <div
                            class="fours__item"
                            v-for="(item, index) in foursListTwo"
                            :key="index"
                            :style="{ borderColor: `${item.color}` }"
                            @click="handleClick3(item, index)"
                        >
                            <div class="fours__item__left">
                                <div :style="{ color: `${item.color}` }">
                                    {{ item.name }}
                                </div>
                                <div>环比：{{ item.huanbi }}</div>
                            </div>
                            <div
                                class="fours__item__right"
                                :style="{ color: `${item.color}` }"
                            >
                                {{ item.value }}个
                            </div>
                        </div>
                    </div>
                    <div id="chart2"></div>
                </div>
                <div class="sjzlLeftTwo__right__bottom">
                    <div class="title">各部门接入资源实时情况</div>
                    <div id="chart4">
                        <div class="chart4Header">
                            <div>新增数据名称</div>
                            <div>数据流量</div>
                            <div>部门</div>
                        </div>
                        <div class="myscroll1">
                            <ul class="flightBody">
                                <li
                                    class="flightBodyList"
                                    v-for="(item, index) in tbody1"
                                    :key="index"
                                >
                                    <div>{{ item["name"] }}</div>
                                    <div>{{ item["size"] }}</div>
                                    <div>{{ item["time"] }}</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sjzlLeftTwo">
            <div></div>
            <div></div>
        </div>
    </div>
</template>

<script>
import SjzlTitle from "../SjzlTitle";
import { chartsArr, chartsOption } from "./sjzldata.js";
import { onMounted, ref, provide } from "vue";
import echarts from "echarts";
import axios from "axios";
import { useStore } from "vuex";
//import { yuanshiku, atbody , atbody1,sheng8,gebumen } from  './tableData.js'
console.log();
export default {
    components: {
        SjzlTitle,
    },
    setup() {
        const store = useStore();
        let foursList = ref([
            { name: "数据量", value: "1亿4138万条", grow: "月增量：+30%" },
            { name: "数据占用空间", value: "21GB", grow: "月增量：+23%" },
            { name: "省大数据平台接入资源", value: "33个", grow: "" },
            { name: "各部门接入资源", value: "201个", grow: "" },
        ]);
        let eightsList = ref([
            {
                name: "可用资源",
                value: "1",
                huanbi: "+23%",
                color: "rgb(25, 241, 249)",
            },
            {
                name: "接口",
                value: "0",
                huanbi: "+55%",
                color: "rgb(25, 241, 249)",
            },
            {
                name: "有条件共享",
                value: "0",
                huanbi: "+28%",
                color: "rgb(25, 241, 249)",
            },
            {
                name: "库表",
                value: "0",
                huanbi: "+50%",
                color: "rgb(25, 241, 249)",
            },
            {
                name: "无条件共享",
                value: "0",
                huanbi: "+25%",
                color: "rgb(25, 241, 249)",
            },
            {
                name: "文件",
                value: "4",
                huanbi: "+123%",
                color: "rgb(25, 241, 249)",
            },
            {
                name: "已申请资源",
                value: "0",
                huanbi: "+24%",
                color: "rgb(25, 241, 249)",
            },
            {
                name: "文件夹",
                value: "3",
                huanbi: "+123%",
                color: "rgb(25, 241, 249)",
            },
        ]);
        let foursListTwo = ref([
            {
                name: "接口",
                value: "0",
                huanbi: "+35%",
                color: "rgb(25, 241, 249)",
            },
            {
                name: "库表",
                value: "0",
                huanbi: "+50%",
                color: "rgb(25, 241, 249)",
            },
            {
                name: "文件",
                value: "0",
                huanbi: "0%",
                color: "rgb(25, 241, 249)",
            },
            {
                name: "文件夹",
                value: "0",
                huanbi: "0%",
                color: "rgb(25, 241, 249)",
            },
        ]);
        function drawPie(id, width, data) {
            var dom = document.getElementById(id);
            var myChart = echarts.init(dom);
            var datas = [data];
            let option = {
                legend: {
                    x: "center", //图例距离左的距离
                    y: "bottom", //图例上下居中
                    itemHeight: 7,
                    itemWidth: 7,
                    textStyle: {
                        color: "#fff",
                        fontSize: 12,
                    },
                },
                series: datas.map(function (data, idx) {
                    return {
                        type: "pie",
                        radius: [30, 50],
                        top: "0",
                        height: "100%",
                        left: "center",
                        center: ["50%", "35%"],
                        width: width,
                        itemStyle: {
                            borderColor: "#fff",
                            borderWidth: 0,
                            normal: {
                                color: function (params) {
                                    var colorList = [
                                        "#ffcf00",
                                        "#0098ff",
                                        "#7c3c83",
                                        "#6796d7",
                                        "#ee9175",
                                        "#d65671",
                                        "#46e89c",
                                        "#f23030",
                                        "#26ece5",
                                        "#a634f6",
                                    ];
                                    return colorList[params.dataIndex];
                                },
                            },
                        },
                        label: {
                            alignTo: "edge",
                            formatter: "{name|{b}}\n{time|{c}}",
                            minMargin: 5,
                            edgeDistance: 10,
                            lineHeight: 15,
                            rich: {
                                time: {
                                    fontSize: 12,
                                    color: "#fff",
                                },
                            },
                        },
                        labelLine: {
                            length: 15,
                            length2: 0,
                            maxSurfaceAngle: 80,
                        },
                        labelLayout: function (params) {
                            var isLeft =
                                params.labelRect.x < myChart.getWidth() / 2;
                            var points = params.labelLinePoints;
                            // Update the end point.
                            points[2][0] = isLeft
                                ? params.labelRect.x
                                : params.labelRect.x + params.labelRect.width;

                            return {
                                labelLinePoints: points,
                            };
                        },
                        data: data,
                    };
                }),
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        function drawBar(id, data) {
            let xData = data.map((item, index) => {
                return item.name;
            });
            let yData1 = data.map((item, index) => {
                return item.jk;
            });
            let yData2 = data.map((item, index) => {
                return item.kb;
            });
            let yData3 = data.map((item, index) => {
                return item.wj;
            });
            let yData4 = data.map((item, index) => {
                return item.wjj;
            });
            var dom = document.getElementById(id);
            var myChart = echarts.init(dom);
            var labelOption = {
                show: true,
                position: "top",
                distance: "23",
                align: "center",
                verticalAlign: "top",
                rotate: "0",
                formatter: "{c}",
                fontSize: 12,
                rich: {
                    name: {
                        textBorderColor: "#fff",
                    },
                },
            };
            let option = {
                color: [
                    "#4DF5E9",
                    "#9878FF",
                    "#43F76E",
                    "#EEE40F",
                    "#4EF5E8",
                    "#9777FF",
                    "#4EF5E8",
                ],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                grid: {
                    left: "5%",
                    right: "-3%",
                },
                legend: {
                    top: "5%",
                    data: ["接口", "库表", "文件", "文件夹"],
                    textStyle: {
                        //图例文字的样式
                        color: "#fff",
                        fontSize: 12,
                    },
                },
                xAxis: [
                    {
                        type: "category",
                        axisTick: { show: false },
                        axisLabel: {
                            textStyle: {
                                color: "#ffffff",
                                fontSize: 12,
                            },
                            rotate: 45,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#333",
                            },
                        },
                        data: xData,
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        axisLabel: {
                            textStyle: {
                                color: "#ffffff",
                                fontSize: 12,
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#333",
                            },
                        },
                        splitLine: {
                            show: false,
                            //  改变轴线颜色
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ["red"],
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "接口",
                        type: "bar",
                        barGap: 0,
                        barWidth: 10,
                        label: labelOption,
                        barGap: 0.5,
                        itemStyle: {
                            normal: {
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(0,244,255,1)' // 0% 处的颜色
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(0,77,167,1)' // 100% 处的颜色
                                // }], false),
                                //barBorderRadius: [30, 30, 30, 30],
                                // shadowColor: 'rgba(0,160,221,1)',
                                // shadowBlur: 4,
                            },
                        },
                        data: yData1,
                    },
                    {
                        name: "库表",
                        type: "bar",
                        label: labelOption,
                        barWidth: 10,
                        barGap: 0.5,
                        data: yData2,
                        itemStyle: {
                            normal: {
                                //barBorderRadius: [30, 30, 30, 30],
                            },
                        },
                    },
                    {
                        name: "文件",
                        type: "bar",
                        label: labelOption,
                        barWidth: 10,
                        data: yData3,
                        barGap: 0.5,
                        itemStyle: {
                            normal: {
                                //barBorderRadius: [30, 30, 30, 30],
                            },
                        },
                    },
                    {
                        name: "文件夹",
                        type: "bar",
                        label: labelOption,
                        barWidth: 10,
                        barGap: 0.5,
                        data: yData4,
                        itemStyle: {
                            normal: {
                                //barBorderRadius: [30, 30, 30, 30],
                            },
                        },
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        let bigDataBar = [
            {
                name: "省应急管理厅",
                jk: 23,
                kb: 40,
                wj: 25,
                wjj: 30,
            },
            {
                name: "省交通厅",
                jk: 50,
                kb: 40,
                wj: 30,
                wjj: 25,
            },
            {
                name: "省生态环境厅",
                jk: 40,
                kb: 20,
                wj: 50,
                wjj: 25,
            },
            {
                name: "省统计局",
                jk: 40,
                kb: 20,
                wj: 30,
                wjj: 10,
            },
            {
                name: "省气象局",
                jk: 40,
                kb: 20,
                wj: 35,
                wjj: 30,
            },
            {
                name: "省测绘局",
                jk: 40,
                kb: 20,
                wj: 30,
                wjj: 10,
            },
            {
                name: "省财政局",
                jk: 40,
                kb: 20,
                wj: 35,
                wjj: 30,
            },
        ];
        let bumenData = [
            {
                name: "省应急管理厅",
                jk: 40,
                kb: 30,
                wj: 25,
                wjj: 30,
            },
            {
                name: "省交通厅",
                jk: 55,
                kb: 40,
                wj: 30,
                wjj: 25,
            },
            {
                name: "省生态环境厅",
                jk: 20,
                kb: 20,
                wj: 30,
                wjj: 25,
            },
            {
                name: "省统计局",
                jk: 40,
                kb: 20,
                wj: 30,
                wjj: 10,
            },
            {
                name: "省气象局",
                jk: 40,
                kb: 20,
                wj: 35,
                wjj: 30,
            },
            {
                name: "省测绘局",
                jk: 40,
                kb: 20,
                wj: 30,
                wjj: 10,
            },
            {
                name: "省财政局",
                jk: 40,
                kb: 20,
                wj: 35,
                wjj: 30,
            },
        ];
        const drawBumen = () => {
            var dom = document.getElementById("bumenChart");
            var myChart = echarts.init(dom);
            let option = chartsOption;
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        };
        let bigDataBarNum = [];
        bigDataBar.forEach((item, index) => {
            let name = item.name;
            let sum = item.jk + item.kb + item.wj + item.wjj;
            bigDataBarNum.push({
                name: name,
                value: sum,
            });
        });
        let bumenDataSum = [];
        bumenData.forEach((item, index) => {
            let name = item.name;
            let sum = item.jk + item.kb + item.wj + item.wjj;
            bumenDataSum.push({
                name: name,
                value: sum,
            });
        });
        let ths = ["部门/类型名称", "数量"];
        let ths1 = ["资源", "部门"];
        let yuanshiku = ref([]);
        let sheng8 = ref([]);
        let gebumen = ref([]);
        const handleClick1 = (item, index) => {
            switch (index) {
                case 0:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths,
                        tds: yuanshiku.value[0].sjl_mx,
                        name: item.name,
                    });
                    break;
                case 1:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths,
                        tds: yuanshiku.value[0].sjzykj_mx,
                        name: item.name,
                    });
                    break;
                case 2:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths,
                        tds: yuanshiku.value[0].sdsjptjrzy_mx,
                        name: item.name,
                    });
                    break;
                case 3:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths,
                        tds: yuanshiku.value[0].gbmjrzy_mx,
                        name: item.name,
                    });
                    break;
            }
        };
        const handleClick2 = (item, index) => {
            switch (index) {
                case 0:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths1,
                        tds: sheng8.value[0].kyzy,
                        name: item.name,
                    });
                    break;
                case 1:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths1,
                        tds: sheng8.value[0].jk,
                        name: item.name,
                    });
                    break;
                case 2:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths1,
                        tds: sheng8.value[0].ytjgx,
                        name: item.name,
                    });
                    break;
                case 3:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths1,
                        tds: sheng8.value[0].kb,
                        name: item.name,
                    });
                    break;
                case 4:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths1,
                        tds: sheng8.value[0].wtjgx,
                        name: item.name,
                    });
                    break;
                case 5:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths1,
                        tds: sheng8.value[0].wj,
                        name: item.name,
                    });
                    break;
                case 6:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths1,
                        tds: sheng8.value[0].ysqzy,
                        name: item.name,
                    });
                    break;
                case 7:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths1,
                        tds: sheng8.value[0].wjj,
                        name: item.name,
                    });
                    break;
            }
        };
        const handleClick3 = (item, index) => {
            switch (index) {
                case 0:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths1,
                        tds: gebumen.value[0].jk,
                        name: item.name,
                    });
                    break;
                case 1:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths1,
                        tds: gebumen.value[0].kb,
                        name: item.name,
                    });
                    break;
                case 2:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths1,
                        tds: gebumen.value[0].wj,
                        name: item.name,
                    });
                    break;
                case 3:
                    store.commit("changeSjzlCenterContent", {
                        ths: ths1,
                        tds: gebumen.value[0].wjj,
                        name: item.name,
                    });
                    break;
            }
        };
        let tbody = ref([]);
        let tbody1 = ref([]);
        onMounted(() => {
            // drawPie("chart1","200%",bigDataBarNum)
            // drawPie("chart2","200%",bumenDataSum)
            // drawBar("chart3",bigDataBar)
            // drawBar("chart4",bumenData)
            drawBumen();
            //原始库资源统计
            //axios.post("http://172.25.110.34:81/foundation/union/subject/scrnYskzytj/list",{}).then((res)=>{
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnYskzytjSpec/list",
                    {}
                )
                .then((res) => {
                    let vdata = res.data.data[0];
                    foursList.value = [
                        {
                            name: "数据量",
                            value: vdata.sjl + "条",
                            grow: "月增量：" + vdata.sjl_yzl,
                        },
                        {
                            name: "数据占用空间",
                            value: vdata.sjzykj,
                            grow: "月增量：" + vdata.sjzykj_yzl,
                        },
                        {
                            name: "省大数据平台接入资源",
                            value: vdata.dsjptzy + "个",
                            grow: "",
                        },
                        {
                            name: "各部门接入资源",
                            value: vdata.bmzy + "个",
                            grow: "",
                        },
                    ];
                });
            //大数据平台资源统计
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnDsjptzytj/list",
                    {}
                )
                .then((res) => {
                    let vdata = res.data.data[0];
                    eightsList.value = [
                        {
                            name: "可用资源",
                            value: vdata.kyzy,
                            huanbi: vdata.kyzy_hb,
                            color: "rgb(25, 241, 249)",
                        },
                        {
                            name: "接口",
                            value: vdata.jk,
                            huanbi: vdata.jk_hb,
                            color: "rgb(25, 241, 249)",
                        },
                        {
                            name: "有条件共享",
                            value: vdata.ytjgx,
                            huanbi: vdata.ytjgx_hb,
                            color: "rgb(25, 241, 249)",
                        },
                        {
                            name: "库表",
                            value: vdata.kb,
                            huanbi: vdata.kb_hb,
                            color: "rgb(25, 241, 249)",
                        },
                        {
                            name: "无条件共享",
                            value: vdata.wtjgx,
                            huanbi: vdata.wtjgx_hb,
                            color: "rgb(25, 241, 249)",
                        },
                        {
                            name: "文件",
                            value: vdata.wj,
                            huanbi: vdata.wj_hb,
                            color: "rgb(25, 241, 249)",
                        },
                        {
                            name: "已申请资源",
                            value: vdata.ysqzy,
                            huanbi: vdata.ysqzy_hb,
                            color: "rgb(25, 241, 249)",
                        },
                        {
                            name: "文件夹",
                            value: vdata.wjj,
                            huanbi: vdata.wjj_hb,
                            color: "rgb(25, 241, 249)",
                        },
                    ];
                });
            //部门对接资源统计
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnBmdjzytj/list",
                    {}
                )
                .then((res) => {
                    let vdata = res.data.data[0];
                    foursListTwo.value = [
                        {
                            name: "接口",
                            value: vdata.jk,
                            huanbi: vdata.jk_hb,
                            color: "rgb(25, 241, 249)",
                        },
                        {
                            name: "库表",
                            value: vdata.kb,
                            huanbi: vdata.kb_hb,
                            color: "rgb(25, 241, 249)",
                        },
                        {
                            name: "文件",
                            value: vdata.wj,
                            huanbi: vdata.wj_hb,
                            color: "rgb(25, 241, 249)",
                        },
                        {
                            name: "文件夹",
                            value: vdata.wjj,
                            huanbi: vdata.wjj_hb,
                            color: "rgb(25, 241, 249)",
                        },
                    ];
                });

            //各部门接入资源实时情况
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnGbmjrzyssqk/list",
                    {}
                )
                .then((res) => {
                    tbody1.value = res.data.data;
                    $(function () {
                        $(".myscroll1").myScroll({
                            speed: 50, //数值越大，速度越慢
                            rowHeight: 50, //li的高度
                        });
                    });
                });
            //省大数据平台接入资源实时情况
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnSdsjptjrzyssqk/list",
                    {}
                )
                .then((res) => {
                    tbody.value = res.data.data;
                    $(function () {
                        $(".myscroll").myScroll({
                            speed: 50, //数值越大，速度越慢
                            rowHeight: 50, //li的高度
                        });
                    });
                });
            //原始库资源统计-明细
            //axios.post("http://172.25.110.34:81/foundation/union/subject/scrnYskzytjMx/list",{}).then((res)=>{
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnYskzytjMxSpec/list",
                    {}
                )
                .then((res) => {
                    yuanshiku.value = res.data.data;
                });
            //省大数据平台接入资源统计-明细
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnDsjptzytjMx/list",
                    {}
                )
                .then((res) => {
                    sheng8.value = res.data.data;
                });
            //各部门接入资源统计明细-明细
            axios
                .post(
                    "http://172.25.110.34:81/foundation/union/subject/scrnBmdjzytjMx/list",
                    {}
                )
                .then((res) => {
                    gebumen.value = res.data.data;
                });
        });
        return {
            foursList,
            eightsList,
            foursListTwo,
            tbody,
            tbody1,
            handleClick1,
            handleClick2,
            handleClick3,
        };
    },
};
</script>
<style >
@-webkit-keyframes rightan {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.rightan {
    animation: rightan 2s infinite;
    animation-fill-mode: both;
}
@keyframes bounceRight {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }

    80% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
}
.bounceRight {
    animation: bounceRight 2s infinite;
}
</style>

<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .leftOne {
        .sjzlLeftOne {
            width: vw1(1280);
            display: flex;
            justify-content: space-between;

            .sjzlLeftOne__left {
                width: vw1(540);
                height: vh(282);

                .fours {
                    padding-top: vh(25);
                    height: vh(282);
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-around;
                    item-aligns: center;

                    .fours__item {
                        width: vw1(230);
                        height: vh(103);
                        background: url('/data/images/sjzl/fours.png') no-repeat;
                        background-size: 100% 100%;
                        padding-left: vw1(30);
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        cursor: pointer;

                        .topWord {
                            font-size: $f20;
                        }

                        .bottomWord {
                            span:nth-child(1) {
                                color: rgba(255, 241, 148, 1);
                                font-size: $f24;
                            }

                            span:nth-child(2) {
                                font-size: $f14;
                                padding-left: vw1(20);
                            }
                        }
                    }

                    .fours__item:nth-child(1) {
                        .bottomWord {
                            span:nth-child(1) {
                                font-size: $f14;
                            }

                            span:nth-child(2) {
                                font-size: $f14;
                                padding-left: vw1(2);
                            }
                        }
                    }

                    .fours__item:nth-child(2) {
                        .bottomWord {
                            span:nth-child(1) {
                                font-size: $f16;
                            }

                            span:nth-child(2) {
                                font-size: $f14;
                                padding-left: vw1(2);
                            }
                        }
                    }
                }
            }

            .sjzlLeftOne__right {
                width: vw1(700);
                height: vh(282);

                .bumenList {
                    width: 100%;
                    height: vh(30);
                    line-height: vh(30);
                    display: flex;
                    justify-content: space-between;

                    div {
                        flex: 1;
                        text-align: center;
                        font-size: $f20;
                    }
                }

                #bumenChart {
                    margin-top: vh(-10);
                    margin-left: vh(-60);
                    width: vw1(800);
                    height: vh(240);
                    // border:1px solid #ddd
                }
            }
        }

        .sjzlLeftTwo {
            width: vw1(1280);
            height: vh(300);
            display: flex;
            justify-content: space-between;
            margin-top: vh(32);

            .sjzlLeftTwo__left {
                flex-shrink: 0;
                width: vw1(620);
                height: vh(260);

                .sjzlLeftTwo__left__top {
                    display: flex;
                    justify-content: space-between;

                    // .fours
                    // width:vw1(268)
                    // height:vh(220)
                    // margin-top:vh(25)
                    // display:flex
                    // justify-content: space-between
                    // flex-wrap:wrap
                    // .fours__item
                    // flex-shrink:0
                    // width:vw1(268)
                    // height:vh(42)
                    // display:flex
                    // justify-content:space-between
                    // border-bottom:2px solid #ddd
                    // .fours__item__left
                    // display:flex
                    // flex-direction :column
                    // justify-content :space-around
                    // div:nth-child(1)
                    // font-size:vw1(15)
                    // line-height:vh(15)
                    // div:nth-child(2)
                    // font-size:vw1(12)
                    // .fours__item__right
                    // font-size:vw1(24)
                    .eights {
                        width: vw1(620);
                        height: vh(260);
                        margin-top: vh(25);
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;

                        .eights__item {
                            flex-shrink: 0;
                            width: vw1(289);
                            height: vh(55);
                            display: flex;
                            justify-content: space-between;
                            border-bottom: 2px solid #ddd;
                            cursor: pointer;

                            .eights__item__left {
                                display: flex;
                                flex-direction: column;
                                justify-content: space-around;

                                div:nth-child(1) {
                                    font-size: $f20;
                                }

                                div:nth-child(2) {
                                    font-size: $f14;
                                }
                            }

                            .eights__item__right {
                                font-size: $f24;
                            }
                        }
                    }

                    #chart1 {
                        margin-top: vh(10);
                        width: vw1(300);
                        height: vh(250);
                        display: none;
                    }
                }

                .sjzlLeftTwo__left__bottom {
                    .title {
                        font-size: $f22;
                        margin-top: vh(15);
                        margin-bottom: vh(15);
                    }

                    #chart3 {
                        width: vw1(620);
                        height: vh(258);
                        background: url('/data/images/sjzl/433.png') no-repeat;
                        background-size: 100% 100%;
                        padding-top: vh(15);
                        padding-left: vw1(20);
                        padding-right: vw1(20);

                        .chart3Header {
                            display: flex;
                            justify-content: space-between;
                            background: rgba(24, 39, 68, 0);
                            font-size: $f18;

                            div:nth-child(1) {
                                text-align: center;
                                line-height: vh(30);
                                flex: 5;
                            }

                            div:nth-child(2) {
                                text-align: center;
                                line-height: vh(30);
                                flex: 2;
                            }

                            div:nth-child(3) {
                                text-align: center;
                                line-height: vh(30);
                                flex: 4;
                            }
                        }

                        .myscroll {
                            height: vh(180);
                            overflow: hidden;

                            .flightBody {
                                cursor: pointer;

                                .flightBodyList {
                                    display: flex;
                                    justify-content: space-between;
                                    // width: vw1(610)
                                    height: vh(50);
                                    line-height: vh(50);
                                    font-size: $f20;

                                    div:nth-child(1) {
                                        flex: 5;
                                        text-align: center;
                                        font-weight: 400;
                                    }

                                    div:nth-child(2) {
                                        flex: 2;
                                        text-align: center;
                                        font-weight: 400;
                                    }

                                    div:nth-child(3) {
                                        flex: 4;
                                        text-align: center;
                                        font-weight: 400;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .sjzlLeftTwo__right {
                flex-shrink: 0;
                width: vw1(620);
                height: vh(260);

                .sjzlLeftTwo__right__top {
                    display: flex;
                    justify-content: space-between;

                    // .fours
                    // width:vw1(268)
                    // height:vh(220)
                    // margin-top:vh(25)
                    // display:flex
                    // justify-content: space-between
                    // flex-wrap:wrap
                    // .fours__item
                    // flex-shrink:0
                    // width:vw1(268)
                    // height:vh(42)
                    // display:flex
                    // justify-content:space-between
                    // border-bottom:2px solid #ddd
                    // .fours__item__left
                    // display:flex
                    // flex-direction :column
                    // justify-content :space-around
                    // div:nth-child(1)
                    // font-size:vw1(15)
                    // line-height:vh(15)
                    // div:nth-child(2)
                    // font-size:vw1(12)
                    // .fours__item__right
                    // font-size:vw1(24)
                    .fours {
                        width: vw1(610);
                        height: vh(260);
                        margin-top: vh(25);
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        flex-wrap: wrap;

                        .fours__item {
                            flex-shrink: 0;
                            width: vw1(298);
                            height: vh(107);
                            display: flex;
                            justify-content: space-between;
                            padding: vh(20) vw1(41) vh(20) vw1(39);
                            // border-bottom:2px solid #ddd
                            background: url('/data/images/sjzl/458.png') no-repeat;
                            background-size: 100% 100%;
                            cursor: pointer;

                            .fours__item__left {
                                display: flex;
                                flex-direction: column;
                                justify-content: space-around;

                                div:nth-child(1) {
                                    font-size: $f20;
                                    line-height: vh(25);
                                }

                                div:nth-child(2) {
                                    font-size: $f14;
                                }
                            }

                            .fours__item__right {
                                font-size: $f30;
                            }
                        }
                    }

                    #chart2 {
                        margin-top: vh(10);
                        width: vw1(300);
                        height: vh(250);
                        display: none;
                    }
                }

                .sjzlLeftTwo__right__bottom {
                    .title {
                        font-size: $f22;
                        margin-top: vh(15);
                        margin-bottom: vh(15);
                    }

                    #chart4 {
                        width: vw1(620);
                        height: vh(258);
                        background: url('/data/images/sjzl/433.png') no-repeat;
                        background-size: 100% 100%;
                        padding-top: vh(15);
                        padding-left: vw1(20);
                        padding-right: vw1(20);

                        .chart4Header {
                            display: flex;
                            justify-content: space-between;
                            background: rgba(24, 39, 68, 0);
                            font-size: $f18;

                            div:nth-child(1) {
                                text-align: center;
                                line-height: vh(30);
                                flex: 5;
                            }

                            div:nth-child(2) {
                                text-align: center;
                                line-height: vh(30);
                                flex: 2;
                            }

                            div:nth-child(3) {
                                text-align: center;
                                line-height: vh(30);
                                flex: 4;
                            }
                        }

                        .myscroll1 {
                            height: vh(180);
                            overflow: hidden;

                            .flightBody {
                                cursor: pointer;

                                .flightBodyList {
                                    display: flex;
                                    justify-content: space-between;
                                    // width: vw1(610)
                                    height: vh(50);
                                    line-height: vh(50);
                                    font-size: $f20;

                                    div:nth-child(1) {
                                        flex: 5;
                                        text-align: center;
                                        font-weight: 400;
                                    }

                                    div:nth-child(2) {
                                        flex: 2;
                                        text-align: center;
                                        font-weight: 400;
                                    }

                                    div:nth-child(3) {
                                        flex: 4;
                                        text-align: center;
                                        font-weight: 400;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .sjzlLeftThree {
            width: vw1(1280);
            height: vh(300);
        }
    }
}
</style>